<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="src/css/index.css">
</head>
<body>
	<!-- <button>123</button> -->

	<div class="wrapper">
		<div class="my-top">
		<ul class="bg">
		<!-- 	<li>
				<div class="text-left">
					<span>9</span>
					<p>℃&nbsp&nbsp</p>
					<p>晴&nbsp&nbsp</p>
					<p>西北风微风</p>
					<br>
					<p>&nbsp&nbsp&nbsp&nbsp&nbsp-5~11℃</p>
				</div>
				<div class="text-right">
					<p>周三/01月10日</p>
				</div>
				<div class="sun"></div>
				<div class="cloud"></div>
			</li>
			<li></li>
			<li></li>
			<li></li> -->
		</ul>
		</div>
		<div class="my-bot">
			<div class="control-wea">
				<ul class="weather">
				
			<!-- 	<li>
					<p>今天</p>
					<p>01月10日</p>
					<span style='background:url(../images/1-0.png)'></span>
					<p>晴</p>
					<p>-5~11℃</p>
				</li>
				<li>
					<p>今天</p>
					<p>01月10日</p>
					<span></span>
					<p>晴</p>
					<p>-5~11℃</p>
				</li>
				<li>
					<p>今天</p>
					<p>01月10日</p>
					<span></span>
					<p>晴</p>
					<p>-5~11℃</p>
				</li>
				<li>	
					<p>今天</p>
					<p>01月10日</p>
					<span></span>
					<p>晴</p>
					<p>-5~11℃</p></li>
				<li>
					<p>今天</p>
					<p>01月10日</p>
					<span></span>
					<p>晴</p>
					<p>-5~11℃</p>
				</li> -->
				</ul>
				<ul class="24hour"></ul>
				<ul class="water"></ul>
				<ul class="other"></ul>
			</div>
			<div class="control-2">
			<ul class="change">
				<li>近5日天气</li>
				<li>24小时温度</li>
				<li>降雨量</li>
				<li>相关指数</li>
			</ul>
		</div>	
		
		

		</div>

	</div>
	<div class="inp">
		&nbsp&nbsp切换城市 <select name="city" >
								<option value="武汉">武汉</option>
								<option value="上海">上海</option>
								<option value="广州">广州</option>
								<option value="哈尔滨">哈尔滨</option>
								<option value="北京">北京</option>
								<option value="深圳">深圳</option>

							</select>
		<div class="btn">更 换</div>
	</div>
	

	
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
	<script>
var day;
var wea;
var tempMax;
var tempMin;
var fengli;
var fenglistr=[];
var fengxiang;
var myDate =new Date();
var myDate2 =new Date();
var myday2;
var myday =myDate.getDate();
var mymonth2;
var mymonth =myDate.getMonth()+1;
var sunLock = [];
var cloudLock = [];
var json1=[], // 星期几
    json2=[],// 日期
 	json3=[],// 路径
	json4=[],// 晴天雨天
    json5=[];// 温度变化值
var mainJson1, // 主页面首个
	mainJson2=[],// 主页面风
	mainJson3=[];// 主页面日期

var demo;
var value='武汉'; 
tianqi( value );


	function ds(data){
		    console.log(1233);
			return creat(data);
		}
	

	$('.btn').on('click',function(){
		value =$('select  option:selected').text();
		console.log(value);
		tianqi( value );
		// creat(demo);
	})
	 $('.weather').on('mouseenter','li',function(e){
	  	var index =$(this).index();
	  	$('.weather li').css({backgroundColor:'#30B3B4'});
	  	$(this).css({backgroundColor:'#45BBBD'})
	  	$('.bg li').hide();
	  	$('.bg li').eq(index).show();
	  })
	   $('.weather').on('mouseleave',function(e){
	   	$('.weather li').css({backgroundColor:'#30B3B4'});
	  	$('.weather li').eq(0).css({backgroundColor:'#45BBBD'})
	  	$('.bg li').hide();
	  	$('.bg li').eq(0).show();
	   })
	function tianqi( value ){
	var oscript =document.createElement('script');
			oscript.src='http://wthrcdn.etouch.cn/weather_mini?city='+value+'&callback=ds';
			document.body.appendChild(oscript);
			document.body.removeChild(oscript);

}
	function creat(demo){
		var listr='';
		var divstr='';
		mainJson1=demo.data.wendu;
		for(var i=0;i<5;i++){
			day=demo.data.forecast[i].date.split('日');
			wea=demo.data.forecast[i].type;
			tempMax = parseInt(demo.data.forecast[i].high.split(' ')[1]);
			tempMin = parseInt(demo.data.forecast[i].low.split(' ')[1]);
			if(myday==day[0]){
				json1[i]="今天";
			}else if(myday==day[0]-1){
				json1[i]="明天";
			}else{
				json1[i]=day[1];
			}

			mayday2 = myDate2.setDate(myday+i);
			mymonth2 = myDate2.getMonth()+1;
			if(mymonth2<10){
				json2[i]='0'+mymonth2+'月'+day[0]+'日';
			}else{
				json2[i]=mymonth2+'月'+day[0]+'日';
			}	

		switch(wea){
			case "多云":json3[i]='url(src/images/1-2.png)';
						sunLock[i]='show';
						cloudLock[i]='show';
							break;
			case "晴" : json3[i]='url(src/images/1-0.png)';
						sunLock[i]='show';
						cloudLock[i]='hide';
							break;
			case "雨" : json3[i]='url(src/images/1-6.png)';
						sunLock[i]='hide';
						cloudLock[i]='hide';
							break;
			case "阵雪" : json3[i]='url(src/images/1-8.png)';
						sunLock[i]='hide';
						cloudLock[i]='hide';
							break;
			case "中雪" : json3[i]='url(src/images/1-7.png)';
						sunLock[i]='hide';
						cloudLock[i]='hide';
							break;
			default :json3[i]='url(src/images/1-2.png)';
					sunLock[i]='hide';
						cloudLock[i]='hide';
		}
		json4[i] =wea;
		json5[i] =tempMin+'~'+tempMax;

		fengli =demo.data.forecast[i].fengli.slice(9,-3);
		fengxiang =demo.data.forecast[i].fengxiang;

		mainJson2[i] = fengxiang +fengli;
		mainJson3[i] =demo.data.forecast[i].date.split('日')[1]+'/'+json2[i];
			listr +='<li>\
					<p>'+json1[i]+'</p>\
					<p>'+json2[i]+'</p>\
					<span ></span>\
					<p>'+json4[i]+'</p>\
					<p>'+json5[i]+'℃</p>\
					</li>';

			if(i== 0){
					divstr +='	<li>\
							<div class="text-left">\
							<span>'+mainJson1+'</span>\
							<p>℃&nbsp&nbsp</p>\
							<p>'+json4[i]+'&nbsp&nbsp</p>\
							<p>'+mainJson2[i]+'</p>\
							<br>\
							<p>&nbsp&nbsp&nbsp&nbsp&nbsp'+json5[i]+'℃</p>\
						</div>\
						<div class="text-right">\
							<p>'+mainJson3[i]+'</p>\
						</div>\
						<div class="sun"></div>\
						<div class="cloud"></div>\
						</li>';
			}else{
					divstr +='	<li>\
							<div class="text-left">\
							<span>'+json5[i]+'</span>\
							<p>℃&nbsp&nbsp</p>\
							<p>'+json4[i]+'&nbsp&nbsp</p>\
							<p>'+mainJson2[i]+'</p>\
							<br>\
							<p></p>\
						</div>\
						<div class="text-right">\
							<p>'+mainJson3[i]+'</p>\
						</div>\
						<div class="sun"></div>\
						<div class="cloud"></div>\
						</li>';

			}
		}	
		// console.log(listr);
		$('.weather').html('');
	   $('.bg').html('');
	   $('.weather').html(listr);
	   $('.bg').html(divstr);
	   // 太阳和云的功能
	for(var j=0 ;j<5 ;j++){
			if(sunLock[j] == 'show'){
				$('.bg li').eq(j).find('.sun').show();
			}else{
				$('.bg li').eq(j).find('.sun').hide();
			}
			if(cloudLock[j] == 'show'){
				$('.bg li').eq(j).find('.cloud').show();
			}else{
				$('.bg li').eq(j).find('.cloud').hide();
			}

			$('.weather span').eq(j).css('background-image',json3[j]);

		}
	

	



	}
	

	</script>
	<!-- <script src="src/js/demo.js"></script> -->

</body>
</html>

